<template>
  <view>
    <view class="u-page">
      <view class="commongap _10 white"></view>
      <view class="top">
        <!-- 轮播图 -->
        <view class="banner">
          <u-swiper indicator indicatorMode="dot" radius="0" :list="topAds" height="280rpx" imgMode="widthFix" ></u-swiper>
        </view>
      </view>
      <view class="doubleBtns" v-if='menuList.length>1'>
          <view class="item" v-for="(item, index) in menuList" :key="index" @click="handleMenuButtonClick(item)" >
            <image :src="getFmtImage(item.img)" mode=""></image>
          </view>
      </view>
      <view class="doubleBtns" v-else>
          <view class="item1" v-for="(item, index) in menuList" :key="index" @click="handleMenuButtonClick(item)" >
            <image :src="getFmtImage(item.img)" mode=""></image>
          </view>
      </view>
      <view class="rwvw" v-if='rwList.length>0'>
          <view class="tit">任务情况</view>
          <view class="item" v-for="(item,index) in rwList" :key="index" @click="toDet(item)">
            <view class="zuo">
              <view class="mc">{{item.mc}}</view>
              <view class="sj">{{item.startTime}}</view>
            </view>
            <view class="you rd" v-if="item.status=='已超期'||item.status=='未完成'">
              {{item.status}}
            </view>
            <view class="you" v-else>
              {{item.status}}
            </view>
          </view>
      </view>
      <view class="rwvw" v-else>
          <view class="tit">任务情况</view>
          <view style="padding-left:10rpx">
            暂无内容...
          </view>
      </view>
      
    </view>
    <mytabbar v-if="characterType"></mytabbar>
  </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import sceneMixins from "@/utils/sceneMixins";
import mytabbar from "@/components/tabbar/index.vue";
export default {
  options: { styleIsolation: "shared" },
  components: { mytabbar: mytabbar },
  mixins: [sceneMixins],
  computed: {
    ...mapState(["userInfo", "openId", "token", "characterType"]),
  },
  data() {
    return {
      topAds: [],
      menuList: [],
      rwList:[]
    };
  },

  methods: {
    ...mapMutations(["changeTab", "changeCharacterType"]),
    toDet:function(item){
      this.gotoH5Page('/mobile/qyjg/pages/H5/rwxq.html?id='+item.id+'&token='+this.token)
    },
    handleMenuButtonClick: function (eventHandler) {
      if (eventHandler.pemissionControl) {
        var pc = eventHandler.pemissionControl;
        var judge = this.userInfo && pc[1].includes(this.userInfo[pc[0]]);
        if (!judge) {
          uni.showModal({
            title: "提示",
            content: eventHandler.failMsg || "该功能未暂未开放/或您无权限使用",
            showCancel: false,
          });
          return;
        }
      }

      if (eventHandler.type === "switchTab") {
        this.changeTab(eventHandler.tabIndex);
        uni.switchTab({
          url: eventHandler.url,
        });
      } else if (eventHandler.url) {
        uni.navigateTo({
          url: eventHandler.url,
        });
      } else if (eventHandler.h5) {
        this.gotoH5Page(eventHandler.h5);
       }
    },
        getData() {
          var vm = this;
        if(vm.userInfo.type=='领导'){
                vm.getAndLoad(
        "获取首页数据",
        vm.WX_ASSETS + "/xcx/task/list.jsp?status=已超期&pageNo=0&pageSize=3",
        function (res) {
          // console.log("🚀 ~ file: index.vue:99 ~ getData ~ res:", res)
          vm.rwList=res.data.data.slice(0,3)

        }
      );
        }else{
                vm.getAndLoad(
        "获取首页数据",
        vm.WX_ASSETS + "/xcx/task/list.jsp?mc=&pageNo=0&pageSize=3",
        function (res) {
          // console.log("🚀 ~ file: index.vue:99 ~ getData ~ res:", res)
          vm.rwList=res.data.data.slice(0,3)

        }
      );
        }
      vm.getAndLoad(
        "获取首页数据12",
        vm.WX_ASSETS + "/xcx/task/overTime.jsp",
        function (res) {


        }
      );
    },


  },
  onShow() {
    var vm = this;
    vm.waitVariable("token").then(() => {
      if (vm.userInfo.userId) {//根据用户角色id
        var characterType = vm.userInfo.type;
        console.log("🚀 ~ file: index.vue:138 ~ vm.waitVariable ~ vm.userInfo.type:", vm.userInfo.type)
        vm.changeCharacterType(characterType);
        if (characterType == '领导'||characterType == '科员') {
          vm.getAndLoad('首页建管配置', vm.WX_ASSETS + '/wxJSON/首页配置/建管.json', function (data) {
              vm.topAds = data.topAds.map(n => vm.getFmtImage(n));
              vm.menuList = data.menuList;
              // console.log("🚀 ~ file: index.vue ~ line 95 ~ data.menuList", data.menuList)
          })
        }else if(characterType == '参建方') {
          vm.getAndLoad('首页参建配置', vm.WX_ASSETS + '/wxJSON/首页配置/参建.json', function (data) {
            vm.topAds = data.topAds.map(n => vm.getFmtImage(n));
              vm.menuList = data.menuList;
          })
        }else{
          vm.getAndLoad('首页固定单位配置', vm.WX_ASSETS + '/wxJSON/首页配置/固定单位.json', function (data) {
            vm.topAds = data.topAds.map(n => vm.getFmtImage(n));
              vm.menuList = data.menuList;
          })
        }
      } else {
        uni.redirectTo({url: "/pages/login/index"});
      }      
    })
  },
  onLoad(options) {
    var vm=this
        vm.waitVariable("token").then(() => {
      // vm.getData();

        vm.getData()
      
    });
    },
};
</script>

<style lang="scss" scoped>
.u-page {
  height: 100vh;
  overflow: hidden;
  background: #f3f5f7;
}
.top {
  width: 100vw;
  height: 280rpx;
  background-color: #ffffff;
  .banner {
    width: 100vw;
    margin: 0 auto;
    margin-top: -20rpx;
    /deep/ {
      .u-swiper {
        background-color: #ffffff !important;
      }
    }
  }
}
.doubleBtns{
  width: 90vw;
  margin: 0 auto;
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .item{
    width: 320rpx;
	  height: 240rpx;
    background:#fff;
            image {
    width: 320rpx;
	  height: 240rpx;
        }
  }
  .item1{
    width: 670rpx;
	  height: 180rpx;
            image {
    width: 670rpx;
	  height: 180rpx;
        }
  }
}
.rwvw{
  width: 90vw;
  margin: 0 auto;
  margin-top: 20rpx;
  height: calc(100vh - 700rpx);
  background:#fff;
  border-radius: 20rpx;
  overflow: auto;
  .tit{
    width: 93%;
    margin: 0 auto;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 34rpx;
    font-weight: bold;
    color: #000;
  }
  .item{
    width: 93%;
    height: 25%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .zuo{
      .mc{
        font-size: 30rpx;
        color: #000;
      }
      .sj{
        font-size: 24rpx;
        color: #a5a5a5;
      }
    }
    .you{
      width: 120rpx;
	    height: 48rpx;
	    background-color: #e5e9ee;
	    border-radius: 10rpx;
      font-size: 24rpx;
      color: #70859f;
      text-align: center;
      line-height: 48rpx;
    }
    .rd{
      background-color: #fbeae5;
      color: #de5757;
    }
    // background: red;
  }
}
.menuButtons {
    .item {
        display: flex;
        margin: 20rpx 40rpx;
        border-radius: 10rpx;
        padding: 20rpx;
        align-items: center;
        image {
            width: 96rpx;
            height: 96rpx;
        }
        .righLen {
            margin: 0 20rpx;
            font-size: 32rpx;
            .len {
                // font-weight: bold;
                margin-bottom: 6rpx;
            }
            .len2 {
                color: #C0C1C1;
                font-size: 24rpx;
            }
        }
        .right {
            margin-left: auto;
        }
    }
}

</style>
